<script lang="jsx">
import { defineEmits, defineExpose } from 'vue'
import { Button, Notification } from '@arco-design/web-vue' // 根据实际情况调整导入路径
import { whetherShareGoods, whetherShareOrder } from '~/pages/template/tools'

export default {
  emits: ['click'],
  setup(props, { emit }) {
    const handleClick = (id, talkId) => {
      Notification.remove(id)
      emit('click', talkId)
    }

    const tips = (title, content, talkId) => {
      const id = Date.now()

      // 使用一个局部组件来处理按钮的点击事件
      const FooterButton = {
        render() {
          return (
            <Button
              type="primary"
              size="small"
              onClick={() => handleClick(id, talkId)}
            >
              查看
            </Button>
          )
        },
      }

      // 针对于传参数的内容进行判断并渲染
      let text = ''
      let result = whetherShareGoods(content)

      if (result) {
        text = `分享了一个商品-${result.goodsName}`
      }
      else {
        result = whetherShareOrder(content)
        if (result)
          text = `分享了一个订单`
        else
          text = content
      }

      Notification.info({
        title,
        content: text,
        id,
        closable: true,
        duration: 8000,
        footer: <FooterButton />, // 使用局部组件作为footer
      })
    }

    defineExpose({ tips })

    return { tips }
  },
}
</script>

<template>
  <div />
</template>
